<template>
  <div>
    <Editor :init="init" v-model="counter" ref="tinymce"> </Editor>
  </div>
</template>

<script>
  import Editor from "@tinymce/tinymce-vue";
  import  "../../tools/tinymce/tinymce.min.js";
  import "../../tools/tinymce/icons/default/icons.min.js";
  import "../../tools/tinymce/themes/silver/theme.min.js";
  import "../../tools/tinymce/langs/zh_CN";
  //注册插件
  import "../../tools/tinymce/plugins/preview/plugin.min.js";
  import "../../tools/tinymce/plugins/code/plugin.min.js";
  import "../../tools/tinymce/plugins/image/plugin.min.js";
  import "../../tools/tinymce/plugins/imagetools/plugin.min.js";
  import "../../tools/tinymce/plugins/hr/plugin.min.js";
  import "../../tools/tinymce/plugins/insertdatetime/plugin.min.js";
  import "../../tools/tinymce/plugins/link/plugin.min.js";
  import "../../tools/tinymce/plugins/emoticons/plugin.min.js";
  import "../../tools/tinymce/plugins/emoticons/js/emojis.min.js";
  import "../../tools/tinymce/plugins/emoticons/js/emojiimages.min.js";
  import "../../tools/tinymce/plugins/fullscreen/plugin.min.js";
  import "../../tools/tinymce/plugins/table/plugin.min.js";
  import "../../tools/tinymce/plugins/textcolor/plugin.min.js";
  import "../../tools/tinymce/plugins/charmap/plugin.min.js";
  import "../../tools/tinymce/plugins/placeholder/plugin.min.js";

  export default {
    components: {
      Editor,
    },
    props: ["newhtml"],
    data() {
      return {
        selector: "tinydemo",
        counter: this.newhtml,
        init: {
          language: "zh_CN",
          height: "400px",
          margin: "0",
          padding: "0",
          branding: false,
          // cache_suffix: "?v=5.0.0", //缓存请求后缀
          draggable_modal: true,
          elementpath: false,
          placeholder: "输入内容（不写有默认模板）",
           placeholder_tag: 'div',

          init_instance_callback: function (editor) {
            window.tinymce.activeEditor.setMode('readonly');
          },

          plugins: "preview code image imagetools hr insertdatetime link emoticons fullscreen table charmap placeholder",
          toolbar: [
            "undo redo | bold italic underline strikethrough charmap selectall | forecolor backcolor | alignleft aligncenter alignright |  formatselect fontselect  fontsizeselect table| outdent indent |removeformat  |image imagetools emoticons fullscreen ",
            "preview | code",
          ],
          images_upload_handler: (blobInfo, succFun, failFun) => {
            let base64 = "data:image/png;base64," + blobInfo.base64();
            succFun(base64);
            // var xhr, formData;     forecolor
            // var file = blobInfo.blob(); //转化为易于理解的file对象
            // xhr = new XMLHttpRequest();
            // xhr.open('POST', 'http://localhost:3000/api/userlist/Upload');
            // xhr.setRequestHeader("Authorization", localStorage.getItem("token"));
            // xhr.withCredentials = false;

            // xhr.onload = function () {
            //   var json;
            //   if (xhr.status != 200) {
            //     failFun('上传错误 ');
            //     return;
            //   }
            //   json = JSON.parse(xhr.responseText);
            //   succFun(json.url);
            // };
            // formData = new FormData();
            // formData.append('ava', file, file.name); //此处与源文档不一样

            // xhr.send(formData);
          },
        },
      };
    },

    created() {


    },
    methods: {
      // 父组件获取数据
      getVal() {
        return this.counter;
      },
      //动态设置只读或编辑
      setMode(data) {
        window.tinymce.activeEditor.setMode(data);
      }
    },
  };

</script>

<style>
  @import "../../tools/tinymce/skins/ui/oxide/skin.min.css";
  @import "../../tools/tinymce/skins/content/default/content.min.css";

</style>
